<template>
    <div class="work-atten">
        <div>
            <a-select class="work-atten-input"  :options="deptSelectOption" v-model:value="deptValue"></a-select>
            <a-select class="work-atten-input"  :options="options" v-model:value="selectData" @change="handleSelectChange"></a-select>
            <a-date-picker class="work-atten-input" v-model:value="month" :picker="pikerMode"  />
            <a-button class="work-atten-button" @click="reseat">重置</a-button>
            <a-button class="work-atten-button" type="primary" @click="search">查询</a-button>
        </div>
        <div class="charts-div">
            <Bar   :option="chartOptions" height="60vh"  width="100%"/>
        </div>
        <div class="charts-div flex-div">
            <div class="flex-div-item">
                <Bar   :option="pieOptions" height="60vh"  width="100%"/>
            </div>
            <div class="flex-div-item">
                <Bar   :option="dayAndNightOptions" height="60vh" width="100%"/>
            </div>
        </div>
    </div>
</template>
<script   setup>
import { onMounted, ref,computed } from 'vue';
import Bar from '/@/components/chart/Bar.vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import {list,listAll} from './Violation.api';
import dayjs from 'dayjs';
import { useUserStore } from '/@/store/modules/user';
import { message } from 'ant-design-vue';
const { getThemeColor } = useRootSetting();
let selectData = ref(1);
let month = ref(null)
let pikerMode = ref('month');
const deptSelectOption = ref([]);//部门下拉数据源
const chartOptions = ref({})//人员考勤累计时长
const pieOptions = ref({})//席位累计考勤时长
const dayAndNightOptions = ref({})//白夜班考勤时长
const deptValue  = ref(null);//部门选择的数据
const userStore = useUserStore();
const options = ref([
  {
    value: 1,
    label: '月份',
  },
  {
    value: 2,
    label: '年份',
  }
])
onMounted(async()=>{
    let result  = await getDeptList();
    if(result && result.length){
        deptValue.value = result[0].value;
    }
    deptSelectOption.value = result;
    initData()
    queryData();
})
const initData = () => {
    pikerMode.value = 'month';
    if (deptSelectOption.value && deptSelectOption.value.length) {
        deptValue.value = deptSelectOption.value[0].value;
    }
    selectData.value = 1;
    month.value = dayjs();
}
const seriesColor = computed(() => {
    return getThemeColor.value
})

const getDeptList = async()=>{
    let result = await listAll();
    result = result.filter(item =>{
        return item.izLeaf !=0 && userStore.getLoginInfo?.userInfo?.orgCode == item.orgCode
    })
    console.log("数据result==",result);
    let data = result.map(item => {
            return {
                label: item.departName,
                value: item.orgCode
            }
        
    })
    console.log("数据==",data);
    
    return data;
}
/**
 * select 的值变化函数
 * @param v 
 */
const handleSelectChange = (v)=>{
    console.log(v);
    if(v == 1){
        pikerMode.value = 'month'
    }else{
        pikerMode.value = 'year'
    }
}

/**
 * 人员考勤累计时长
 */
const queryData = async ()=>{
    if(!month.value){
        message.error("请选择时间！");
        return;
    }
    let mouthData = ""
    if(pikerMode.value == 'month'){
        mouthData = dayjs(month.value).format('YYYY-MM')
    }else{
        mouthData = dayjs(month.value).format('YYYY')
    }
    let result = await list({
        orgCode:deptValue.value,
        queryDate:mouthData
    });
    console.log(result);
    let x = [];
    let data = [];
    if(result && result.userVOList){
        for (const item of result.userVOList) {
            x.push(item.name);
            data.push(item.num);
        }
    }
    
    chartOptions.value = {
        title: { 
            text: '人员违规次数统计TOP10', 
            // textStyle: { 
            //     fontWeight: 'lighter' 
            // }
        },
        tooltip:{
            formatter: '{b0}<br>违规次数: {c0}次'
        },
        xAxis: {
          type: 'category',
          data: x
        },
        yAxis: {
            axisLabel:{
                formatter:'{value}次'
            },
            type:'value'
        },
        barWidth:40,
        legend:{
            type:'plain'
        },
        series:[
            {
                type: 'bar',
                name:'违规次数',
                data:data,
                label:{
                    show:true,
                    position:'top',
                    formatter: '{c}次'
                },
                color:"#477bff"
            }
        ]
        
    }
    getSeatStatic(result.seatVOList);
    getDayAndNight(result.violationVOList)
}
/**
 * 席位违规次数统计
 */
const getSeatStatic = (result = []) =>{
    
    let data = [];
    for (const item of result) {
        data.push({
            name:item.name,
            value:item.num
        });
    }
    pieOptions.value = {
        title: {
            text: '席位违规次数统计',
            left: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            bottom: 'bottom'
        },
        series: [
            {
                name: '席位违规次数统计',
                type: 'pie',
                radius: '50%',
                data: data,
                label:{
                    formatter:'{b}\n\n{c}次',
                    minMargin:5,
                    fontSize:14
                },
            }
        ]
    };
}
/**
 * 违规类型次数统计
 */
const getDayAndNight = (result = []) =>{
     console.log("返回的数据",result);
     
    let dayData = [];//数据
    let x = [];
    for (const item of result) {
        dayData.push(item.num);
        x.push(item.name);
    }
    console.log(dayData,x);
    
    dayAndNightOptions.value = {
        title: { 
            text: '违规类型次数统计', 
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip:{
            formatter: '{b0}<br>违规次数: {c0}次'
        },
        xAxis: {
          type: 'value',
          
        },
        yAxis: {
            axisLabel:{
                formatter:'{value}'
            },
            type:'category',
            data: x
        },
        barWidth:40,
        legend:{
            type:'plain'
        },
        series:[
            {
                type: 'bar',
                name:'违规次数',
                data:dayData,
                stack: 'total',
                label:{
                    show:true,
                    position:'right',
                    formatter: '{c}次'
                },
                color:"#477bff"
            },
        ]
        
    }

}
/**
 * 重置
 */
const reseat = () =>{
    initData()
    queryData()
}
/**
 * 查询
 */
const search = () =>{
    queryData()
}

</script>
<style lang="less" scoped>
html[data-theme='dark'] {
    .work-atten {
        background-color: #000;
    }
}
.work-atten{
    padding: 20px;
    background-color: #fff;
    &-input{
        margin-right: 20px;
        width: 200px;
    }
    &-button{
        margin-right: 20px;
    }
    .charts-div{
        margin-top: 40px;
    }
    .flex-div{
        display: flex;
        .flex-div-item{
            flex:1;
        }
    }
}
</style>